<template>
	<div>
		<div class="flex-start-center">
			<div
				v-for="(item, index) in dataList"
				:key="index"
				style="padding: 0 2px;width: 180px;box-sizing: border-box;flex-shrink: 0;"
			>
				<div style="display: flex;border: solid 1px #eee;white-space: nowrap;background: #fff;padding: 4px 8px;flex-direction: column;width: 100%;box-sizing: border-box;">
					<div style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">时间:</span>
						<span class="item-val">{{ item.beginTime ? `${ filterTime(item.beginTime) } ~ ${ filterTime(item.endTime) }` : '' }}</span>
					</div>
					<div style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">时长:</span>
						<span class="item-val">{{ item.timeMinute }} 分</span>
					</div>
					<div style="display: flex;align-items: center;line-height: 16px;">
						<span class="item-label">原因:</span>
						<div class="item-val" style="color: #2d8cf0;cursor: pointer;" @click="onSelectItem(item)">
							<span style="margin-right: 3px;">{{ item.typeName || '无' }}</span>
							<span class="el-icon-edit-outline"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<save-dialog
			:data-item="dataItem"
			:dialog-state="saveDialogState"
			@on-visible-change="onVisibleChange"
			@on-confirm="onConfirmBtn"
		></save-dialog>
	</div>
</template>

<script>
    import saveDialog from '../save-dialog';
    export default {
        props: {
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        components: {
            saveDialog
        },
        data() {
            return {
                saveDialogState: false,
                dataItem: {}
            };
        },
        methods: {
            onConfirmBtn() {
                this.$emit('on-confirm');
            },
            filterTime(e) {
                return e ? e.split(' ')[1] : '';
            },
            onSelectItem(item) {
                this.dataItem = item;
                this.saveDialogState = true;
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
            }
        }
    };
</script>

<style scoped lang="scss">
.item-label {
    color: #808695;
    margin-right: 3px;
}
.item-val {
    color: #515a6e;
}
</style>
